<template>
  <div class="search">
    <el-autocomplete
      v-model="state1"
      :fetch-suggestions="querySearch"
      clearable
      class="inline-input w-50"
      placeholder="点击输入医院名称"
      @select="handleSelect"
    />

    <el-button type="primary">
      <i-ep-search class="icon-s" />
      搜索
    </el-button>
  </div>
</template>

<script setup lang="ts">
//提示框
interface RestaurantItem {
  value?: string;
  link?: string;
}

const state1 = ref("");

const restaurants = ref<RestaurantItem[]>([]);
const querySearch = (queryString: string, cb: any) => {
  const results = queryString ? restaurants.value.filter(createFilter(queryString)) : restaurants.value;
  // call callback function to return suggestions
  cb(results);
};
const createFilter = (queryString: string) => {
  return (restaurant: RestaurantItem) => {
    return restaurant.value?.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
  };
};
const loadAll = () => {
  return [
    { value: "vue", link: "https://github.com/vuejs/vue" },
    { value: "element", link: "https://github.com/ElemeFE/element" },
    { value: "cooking", link: "https://github.com/ElemeFE/cooking" },
    { value: "mint-ui", link: "https://github.com/ElemeFE/mint-ui" },
    { value: "vuex", link: "https://github.com/vuejs/vuex" },
    { value: "vue-router", link: "https://github.com/vuejs/vue-router" },
    { value: "babel", link: "https://github.com/babel/babel" },
  ];
};

const handleSelect = (item: RestaurantItem) => {
  console.log(item);
};

onMounted(() => {
  restaurants.value = loadAll();
});
</script>

<style scoped lang="scss">
.search {
  margin-top: 20px;
  text-align: center;
  &:deep(.el-input__wrapper) {
    width: 400px;
    margin-right: 10px;
  }

  .icon-s {
    color: white;
  }
}
</style>
